
<style>
    .ul li:after {
        /* position:  absolute; */
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 1px;
        content: '';
        -webkit-transform: scaleY(.5);
        transform: scaleY(.5);
        background-color: #c8c7cc;
    }

    .ul li {
        position: relative;
        overflow: hidden;
        padding: 11px 15px;
        font-size: 16px;
        cursor: pointer;
        transition: all 100ms;
    }

        .ul li:hover {
            background-color: #f5f5f5;
        }

    .ul {
        margin: 0;
        padding: 0;
        position: relative;
        /* margin-top: 0; */
        /* margin-bottom: 0; */
        /* padding-left: 0; */
        list-style: none;
        background-color: #fff;
        overflow: auto;
        height: calc(100% - 44px);
        overflow: -moz-scrollbars-none;
        -ms-overflow-style: none;
    }

        .ul::-webkit-scrollbar {
            width: 0;
        }

        .ul li p {
            font-size: 10px;
            margin: 7px 0 1px 0;
        }

    .ellipsis {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .ul li:hover .ellipsis {
        white-space: initial;
        transition: all 1s;
    }

    .header, .fixed-table-toolbar.panel-heading {
        position: relative;
        z-index: 10;
        right: 0;
        left: 0;
        height: 44px;
        padding-right: 10px;
        padding-left: 10px;
        background-color: #f7f7f7;
        box-shadow: 1px -1px 13px 0px #ccc;
    }


    .fixed-table-toolbar.panel-heading {
        box-shadow: 4px -1px 13px 0px #ccc;
    }

        .fixed-table-toolbar.panel-heading .columns {
            margin-top: 7px;
        }

        .header .title, .fixed-table-toolbar.panel-heading .title {
            font-size: 16px;
            line-height: 50px;
            position: absolute;
            display: block;
            margin: 0 -10px;
            text-align: center;
            white-space: nowrap;
            color: #000;
            font-weight: lighter;
            left: 44px;
            right: 44px;
        }

    .header label, #toolbar > label {
        font-size: 18px;
        padding: 15px 5px 0 0;
        color: #18a689;
        cursor: pointer;
        z-index: 2;
    }

        .header > label:hover, #toolbar > label :hover {
            cursor: pointer;
            color: #f7a54a;
            transition: all 500ms;
        }

    .form-horizontal .form-group {
        margin-left: 0;
        margin-right: 0;
    }

    .form-group {
        margin-bottom: 25px;
    }

    .remove-confirm .form-control[disabled] {
        cursor: default;
    }


    #SkillEditContent {
        height: 100%;
        background-color: #efefef;
        z-index: 3;
        opacity: 0;
        display: none;
    }

    #showContent:checked ~ #SkillEditContent {
        animation: showMovRighterToRight forwards ease-in 0.15s;
        display: block;
    }

    #hideContent:checked ~ #SkillEditContent {
        animation: hideMoveRightToRighter forwards ease-out 0.15s;
        display: block;
    }

    #skillParentNav, #skillNav {
        padding: 0;
        height: 100%;
        border-right: solid 1px #ddd;
        position: absolute;
        overflow: hidden;
        display: none;
        background-color: #efefef;
        opacity: 0;
    }

    #skillNav {
        z-index: 2;
    }

    #showNav:checked ~ #skillNav {
        animation: showMovRighterToRight forwards ease-in 0.15s;
        display: block;
    }

    #hideNav:checked ~ #skillNav {
        animation: hideMoveRightToRighter forwards ease-out 0.15s;
        display: block;
    }

    #skillParentNav {
        z-index: 1;
    }

    #hideNav:checked ~ #skillParentNav {
        animation: showMoveLeftToRight forwards ease-in 0.15s;
        display: block;
    }

    #showNav:checked ~ #skillParentNav {
        animation: hideMoveLeftToLefter forwards ease-out 0.15s;
        display: block;
    }


    @keyframes showmove {
        0% {
            opacity: 0;
            left: 25%;
        }

        100% {
            opacity: 1;
            left: 0%;
        }
    }

    @keyframes showMoveLeftToRight {
        0% {
            opacity: 0;
            left: 25%;
        }

        100% {
            opacity: 1;
            left: 0%;
        }
    }

    @keyframes showMovRighterToRight {
        0% {
            opacity: 0;
            left: 25%;
        }

        100% {
            opacity: 1;
            left: 0%;
        }
    }

    @keyframes hideMoveLeftToLefter {
        0% {
            opacity: 1;
            left: 0%;
        }

        99% {
            opacity: 0;
            left: -25%;
        }

        100% {
            left: -101%;
        }
    }

    @keyframes hideMoveRightToRighter {
        0% {
            opacity: 1;
            left: 0%;
        }

        99% {
            opacity: 0;
            left: 25%;
        }

        100% {
            left: -101%;
        }
    }

    .fc-head-container thead tr, .table thead tr {
        background-color: initial;
    }

    .deletebtn, .movebtn, .copybtn {
        cursor: pointer;
    }

    ul li.addNavBtn {
        color: #ccc;
        text-align: center;
        padding: 10px 20px 17px 0px;
    }

    ul li .btn-group {
        opacity: 0;
        transition: all 300ms;
    }

    ul li:hover .btn-group {
        opacity: 1;
    }

    .addNavBtn i {
        font-size: 30px;
        padding-top: 0;
        position: relative;
        top: 4px;
        padding-right: 10px;
    }

    .addNavBtn span {
        margin-top: -10px;
        position: relative;
        color: #999;
    }
</style>
<div style="height:100%;padding:0;" class="col-xs-12">
    <input type="radio" class="hidden" id="showContent" name="showhidecontent" />
    <input type="radio" class="hidden" id="hideContent" name="showhidecontent" />
    <input type="radio" class="hidden" id="showNav" name="showhidenav" />
    <input type="radio" class="hidden" id="hideNav" name="showhidenav" checked />
    <div class="col-lg-3 col-sm-4 col-xs-12" id="skillParentNav">
        <header class="header">
            <h1 class="title">Skill Group</h1>
        </header>
        <ul class="ul"></ul>
    </div>
    <div class="col-lg-3 col-sm-4 col-xs-12" id="skillNav">
        <header class="header">
            <h1 class="title">>Skill</h1>
            <label class="fa fa-angle-left" id="backToSkillParentNavBtn" for="hideNav"></label>
        </header>
        <ul class="ul"></ul>
    </div>
    <div class="col-xs-12 col-sm-8 col-lg-9 pull-right no-padding" id="SkillEditContent">
        <div id="toolbar">
            <h1 class="title">Skill Detail Edit</h1>
            <label class="visible-xs fa fa-angle-left" for="hideContent"></label>
        </div>
        <div id="table"></div>
    </div>
</div>
<div class="modal fade" id="editSkillParentModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Edit Skill Group</h4>
            </div>
            <div class="modal-body no-padding">
                <form id="editSkillParentForm" class="smart-form">
                    <input type="hidden" name="SkillParentId" class="SkillParentId" />
                    <fieldset>
                        <section>
                            <label class="label">Skill Group Name</label>
                            <label class="input">
                                <input type="text" maxlength="50" name="SkillParentName" class="SkillParentName">
                            </label>
                            <div class="note">
                                <strong>Maxlength</strong> 50 characters.
                            </div>
                        </section>

                        <section>
                            <label class="label">Skill Group Description</label>
                            <label class="textarea">
                                <textarea rows="3" name="SkillParentDescription" class="SkillParentDescription"></textarea>
                            </label>
                            <div class="note">
                                <strong>Note:</strong> This paragraph will be displayed below the skill group name.
                            </div>
                        </section>
                    </fieldset>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button class="btn btn-primary" data-dismiss="modal" id="editSkillParentFormSubmit">
                    Submit
                </button>
            </div>

        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<div class="modal fade" id="addSkillDetailModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Add Skill Detail</h4>
            </div>
            <div class="modal-body no-padding">
                <form id="addSkillDetailForm" class="smart-form">
                    <input type="hidden" name="SkillId" class="SkillId" />
                    <fieldset>
                        <section>
                            <label class="label">Detail Name</label>
                            <label class="input">
                                <input type="text" maxlength="50" name="SkillChildName">
                            </label>
                            <div class="note">
                                <strong>Maxlength</strong> 50 characters.
                            </div>
                        </section>
                        <section>
                            <label class="label">Level Templet</label>
                            <label class="input">
                                <input type="text" maxlength="50" name="LevelId">
                            </label>
                            <div class="note">
                                <strong>A Level Group</strong>, such as[best good bad],[Lv3 Lv2 Lv1 NA],[skilled stranger]
                            </div>
                        </section>
                        <section>
                            <label class="label">Detail Description</label>
                            <label class="textarea">
                                <textarea rows="3" name="SkillChildDescription"></textarea>
                            </label>
                            <div class="note">
                                <strong>Note:</strong> This paragraph will be displayed below the detail name.
                            </div>
                        </section>
                    </fieldset>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button class="btn btn-primary" data-dismiss="modal" id="addSkillDetailFormSubmit">
                    Submit
                </button>
            </div>

        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<div class="modal fade" id="addSkillParentModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Add Skill Group</h4>
            </div>
            <div class="modal-body no-padding">
                <form class="smart-form" id="addSkillParentForm">
                    <fieldset>
                        <section>
                            <label class="label">Skill Group Name</label>
                            <label class="input">
                                <input type="text" maxlength="50" name="SkillParentName">
                            </label>
                            <div class="note">
                                Each contains many skills. For example,Tech Skill Group contains "Languages","Tools","Databases" and so on.<br />
                                <strong>Maxlength</strong> 50 characters.
                            </div>
                        </section>

                        <section>
                            <label class="label">Skill Group Description</label>
                            <label class="textarea">
                                <textarea rows="3" class="custom-scroll" name="SkillParentDescription"></textarea>
                            </label>
                            <div class="note">
                                <strong>Note:</strong> This paragraph will be displayed below the skill group name.
                            </div>
                        </section>
                    </fieldset>
                </form>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button class="btn btn-primary" data-dismiss="modal" id="addSkillParentFormSubmit">
                        Submit
                    </button>
                </div>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<div class="modal fade" id="addSkillModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Add Skill</h4>
            </div>
            <div class="modal-body no-padding">
                <form class="smart-form" id="addSkillForm">
                    <input type="hidden" value="" class="SkillParentId" name="SkillParentId" />
                    <fieldset>
                        <section>
                            <label class="label">Skill Name</label>
                            <label class="input">
                                <input type="text" maxlength="50" name="SkillName">
                            </label>
                            <div class="note">
                                <strong>Maxlength</strong> 50 characters.
                            </div>
                        </section>

                        <section>
                            <label class="label">Skill Description</label>
                            <label class="textarea textarea-expandable">
                                <textarea rows="3" class="custom-scroll" name="SkillDescription"></textarea>
                            </label>
                            <div class="note">
                                <strong>Note:</strong> This paragraph will be displayed below the skill name.
                            </div>
                        </section>
                    </fieldset>
                </form>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button class="btn btn-primary" data-dismiss="modal" id="addSkillFormSubmit">
                        Submit
                    </button>
                </div>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<div class="modal fade" id="editSkillModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Edit Skill</h4>
            </div>
            <div class="modal-body no-padding">
                <form class="smart-form" id="editSkillForm">
                    <input type="hidden" name="SkillId" class="SkillId" />
                    <input type="hidden" maxlength="50" name="SkillParentId" class="SkillParentId">
                    <fieldset>
                        <section>
                            <label class="label">Skill Name</label>
                            <label class="input">
                                <input type="text" maxlength="50" name="SkillName" class="SkillName">

                            </label>
                            <!--<div class="note">
                                <strong>Maxlength</strong> 50 characters.
                            </div>-->
                        </section>

                        <section>
                            <label class="label">Skill Description</label>
                            <label class="textarea">
                                <textarea rows="3" name="SkillDescription" class="SkillDescription"></textarea>
                            </label>
                            <!--<div class="note">
                                <strong>Note:</strong> This paragraph will be displayed below the skill name.
                            </div>-->
                        </section>
                    </fieldset>
                </form>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button class="btn btn-primary" data-dismiss="modal" id="editSkillFormSubmit">
                        Submit
                    </button>
                </div>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<script>
    var $table = $("#table");
    if ($.root_.width() > 768) $("#showContent")[0].checked = true;
    function pagedestroy() {
        $(".modal").remove();
        $("#skillParentNav .ul").off();
        $("#skillNav .ul").off();
    }
    $(".modal").appendTo('body');

    var skillObj = {
        skillGroup: {}, groupId: undefined, skillId: undefined
    }

    setTimeout(initData, 500);

    $("#addSkillParentFormSubmit").click(function () {
        $.ajax({
            url: apiUrl + "Skill/AddSkillParent",
            data: $("#addSkillParentForm").serialize(),
            success: function (data) {
                if (data.status.code == 0) {
                    initData();
                    $("#addSkillParentModal").modal('hide');
                    notice("Success", "Skill group has been inserted");
                }
            }
        });
        return false;
    });

    $("#addSkillFormSubmit").click(function () {
        $.ajax({
            url: apiUrl + "Skill/AddSkill",
            data: $("#addSkillForm").serialize(),
            success: function (data) {
                if (data.status.code == 0) {
                    initData();
                    $("#addSkillModal").modal('hide');
                    notice("Success", "Skill has been inserted");
                }
            }
        });
        return false;
    });

    $("#editSkillParentFormSubmit").click(function () {
        $.ajax({
            url: apiUrl + "Skill/EditSkillParent",
            data: $("#editSkillParentForm").serialize(),
            success: function (data) {
                if (data.status.code == 0) {
                    skillObj.skillGroup[skillObj.groupId].skillParentName = $("#editSkillParentForm .SkillParentName").val();
                    skillObj.skillGroup[skillObj.groupId].skillParentDescription = $("#editSkillParentForm .SkillParentDescription").val();
                    reloadSkillParentNav();
                    $("#editSkillParentModal").modal('hide');
                    notice("Success", "Skill group has been changed");
                }
            }
        });
        return false;
    });

    $("#editSkillFormSubmit").click(function () {
        $.ajax({
            url: apiUrl + "Skill/EditSkill",
            data: $("#editSkillForm").serialize(),
            success: function (data) {
                if (data.status.code == 0) {
                    skillObj.skillGroup[skillObj.groupId].skills[skillObj.skillId].skillName = $("#editSkillForm .SkillName").val();
                    skillObj.skillGroup[skillObj.groupId].skills[skillObj.skillId].skillDescription = $("#editSkillForm .SkillDescription").val();
                    reloadSkillNav();
                    $("#editSkillModal").modal('hide');
                    notice("Success", "Skill has been changed");
                }
            }
        });
        return false;
    });

    function initData() {
        skillObj.skillGroup = {};
        $.ajax({
            url: apiUrl + "Skill/GetAll",
            success: function (data) {
                var html = "";
                if (data.status.code == 0) {
                    $(data.result.parents).each(function (i, e) {
                        skillObj.skillGroup[e.skillParentId] = { skillParentDescription: e.skillParentDescription, skillParentName: e.skillParentName, skillParentId: e.skillParentId, skills: [] };
                    });
                    $(data.result.skills).each(function (i, e) {
                        skillObj.skillGroup[e.skillParentId].skills[e.skillId] = { skillDescription: e.skillDescription, skillName: e.skillName, skillParentId: e.skillParentId, skillId: e.skillId };
                    });
                    reloadSkillParentNav();
                    reloadSkillNav();
                }

            }
        });

    }

    function reloadSkillParentNav() {
        var html = "";
        for (var i in skillObj.skillGroup) {
            var e = skillObj.skillGroup[i];
            html += ''
                + '<li data-id="' + e.skillParentId + '">'
                + ' <div>'
                + '     <span>' + e.skillParentName + '</span>'
                + '     <div class="pull-right btn-group">'
                + '         <button class="btn btn-xs btn-default editbtn"><i class="fa fa-pencil"></i></button>'
                + '         <button class="btn btn-xs btn-default deletebtn"><i class="fa fa-trash-o"></i></button>'
                + '         <button class="btn btn-xs btn-default listbtn"><i class="fa fa-list"></i></button>'
                + '     </div>'
                + ' </div >'
                + '  <p class="ellipsis">' + (e.skillParentDescription || "&nbsp;") + '</p>'
                + '</li > ';
        };
        html += '<li class="addNavBtn"  data-toggle="modal" data-target="#addSkillParentModal"><i class="fa fa-plus-circle"></i><span>New Skill Group<span></li>'
        $("#skillParentNav .ul").html(html);
    }

    function reloadSkillNav() {
        if (!skillObj.groupId || skillObj.groupId <= 0) return;
        var html = "";
        for (var i in skillObj.skillGroup[skillObj.groupId].skills) {
            var e = skillObj.skillGroup[skillObj.groupId].skills[i];
            html += ''
                + '<li data-id="' + e.skillId + '">'
                + ' <div>'
                + '     <span>' + e.skillName + '</span>'
                + '     <div class="pull-right btn-group">'
                + '         <button class="btn btn-xs btn-default editbtn"><i class="fa fa-pencil"></i></button>'
                + '         <button class="btn btn-xs btn-default movebtn"><i class="fa fa-cut"></i></button>'
                + '         <button class="btn btn-xs btn-default copybtn"><i class="fa fa-copy"></i></button>'
                + '         <button class="btn btn-xs btn-default deletebtn"><i class="fa fa-trash-o"></i></button>'
                + '         <button class="btn btn-xs btn-default listbtn"><i class="fa fa-table"></i></button>'
                + '     </div>'
                + ' </div >'
                + '  <p class="ellipsis">' + (e.skillDescription || "&nbsp;") + '</p>'
                + '</li > ';
        };
        html += '<li class="addNavBtn" data-toggle="modal" data-target="#addSkillModal"><i class="fa fa-plus-circle"></i><span>Add New Skill<span></li>'
        $("#skillNav .ul").html(html);
    }

    $("#skillParentNav .ul").on('click', 'li:not(.addNavBtn),.listbtn', function (e) {
        var dom = null;
        if (e.currentTarget.nodeName == 'BUTTON') {
            dom = $(e.currentTarget).parents('li')[0];
        } else {
            dom = e.currentTarget;
        }
        if (!dom.dataset) return;
        $(".SkillParentId").val(skillObj.groupId = dom.dataset.id);
        $("#skillNav .header .title").html(skillObj.skillGroup[skillObj.groupId].skillParentName);
        $("#showNav")[0].checked = true;
        reloadSkillNav();
        e.preventDefault();
        return false;
    });

    $("#skillParentNav .ul").on('click', '.editbtn', function (e) {
        e.preventDefault();
        var dom = $(e.currentTarget).parents('li')[0];
        if (!dom) return;
        $(".SkillParentId").val(skillObj.groupId = dom.dataset.id);
        d = skillObj.skillGroup[skillObj.groupId]
        $(".SkillParentName").val(d.skillParentName);
        $(".SkillParentDescription").val(d.skillParentDescription);
        $("#editSkillParentModal").modal('show');
        return false;
    });


    $("#SkillEditContent").on('click', '.deletebtn', function (e) {
        var id = e.currentTarget.dataset.id;
        $.SmartMessageBox({
            title: 'Are you sure you want to delete it?',
            content: "This row will be removed",
            buttons: '[Remove][Cancel]'
        }, function (ButtonPressed) {
            if (ButtonPressed === "Remove") {
                $.ajax({
                    type: "post",
                    url: apiUrl + "Skill/DeleteSkillDetail",
                    data: { skillDetailId: id },
                    dataType: 'JSON',
                    success: function (data) {
                        if (data.status.code == 0) {
                            $table.bootstrapTable('refresh');
                            notice("Skill Detail has been removed", "If you want to cancel, please contact the system administrator.");
                        }
                    }
                });
            }
        });
    });

    $("#SkillEditContent").on('click', '.movebtn', function (e) {
        var id = e.currentTarget.dataset.id;
        $.SmartMessageBox({
            title: "Where the Skill Detail move to?",
            content: "select a skill with its group",
            buttons: "[Move][Cancel]",
            input: "select",
            options: getSkillSelect(),
        }, function (ButtonPress, Value) {
            var skillId = -1;
            for (var a in skillObj.skillGroup) {
                for (var b in skillObj.skillGroup[a].skills) {
                    if (skillObj.skillGroup[a].skillParentName + " - " + skillObj.skillGroup[a].skills[b].skillName == Value) {
                        skillId = b;
                    };
                }
            }
            if (skillId < 1) return;
            if (ButtonPress !== "Move") return;
            $.ajax({
                type: "post",
                url: apiUrl + "Skill/MoveSkillDetail",
                data: { SkillChildId: id, skillId: skillId },
                dataType: 'JSON',
                success: function (data) {
                    if (data.status.code == 0) {
                        $table.bootstrapTable('refresh');
                        notice("Skill has been moved", "If you want to cancel, please move back it.");
                    }
                }
            })
        });
    });

    function getRowInfoById(id) {
        var data = $table.bootstrapTable("getData");
        for (var d in data) {
            if (data[d].skillChildId == id) {
                return data[d];
            }
        }
    }

    $("#SkillEditContent").on('click', '.copybtn', function (e) {
        var id = e.currentTarget.dataset.id;
        $.SmartMessageBox({
            title: "Where the Skill Detail copy to?",
            content: "select a skill with its group",
            buttons: "[Copy][Cancel]",
            input: "select",
            options: getSkillSelect(),
        }, function (ButtonPress, Value) {
            var skillId = -1;
            var skillGroup = -1;
            for (var a in skillObj.skillGroup) {
                for (var b in skillObj.skillGroup[a].skills) {
                    if (skillObj.skillGroup[a].skillParentName + " - " + skillObj.skillGroup[a].skills[b].skillName == Value) {
                        skillId = b;
                        skillGroup = a;
                    };
                }
            }
            if (skillId < 1) return;
            if (ButtonPress !== "Copy") return;
            var row = getRowInfoById(id);
            debugger;
            $.ajax({
                type: "post",
                url: apiUrl + "Skill/AddSkillDetail",
                data: {
                    SkillId: skillId,
                    SkillChildName: row.skillChildName,
                    SkillChildDescription: row.skillChildDescription,
                    LevelId: row.levelId,
                },
                dataType: 'JSON',
                success: function (data) {
                    if (data.status.code == 0) {
                        $table.bootstrapTable('refresh');
                        notice("Skill has been copyed", "If you want to cancel, please remove back it.");
                    }
                }
            })
        });
    });

    $("#addSkillDetailFormSubmit").click(function () {
        $.ajax({
            url: apiUrl + "Skill/AddSkillDetail",
            data: $("#addSkillDetailForm").serialize(),
            success: function (data) {
                if (data.status.code == 0) {
                    $table.bootstrapTable('refresh');
                    $("#addSkillDetailModal").modal('hide');
                    $.smallBox({
                        title: "Success",
                        content: "<i class='fa fa-clock-o'></i> <i></i>Skill Detail has been inserted",
                        color: "#659265",
                        iconSmall: "fa fa-check fa-2x fadeInRight animated",
                        timeout: 8000
                    });
                } else {
                    alert(data.status.msg);
                }
            }
        });
        return false;
    });

    $("#skillParentNav .ul").on('click', '.deletebtn', function (e) {
        e.preventDefault();
        var dom = $(e.currentTarget).parents('li')[0];
        if (!dom) return false;
        var id = dom.dataset.id;
        $.SmartMessageBox({
            title: 'Are you sure you want to delete it?',
            content: "This row will be removed",
            buttons: '[Remove][Cancel]'
        }, function (ButtonPressed) {
            if (ButtonPressed === "Remove") {
                $.ajax({
                    type: "post",
                    url: apiUrl + "Skill/DeleteSkillParent",
                    data: { skillParentId: id },
                    dataType: 'JSON',
                    success: function (data) {
                        if (data.status.code == 0) {
                            delete skillObj.skillGroup[id];
                            reloadSkillParentNav();
                            notice("Skill Group has been removed", "If you want to cancel, please contact the system administrator.");
                        }
                    }
                })
            }
        });
        return false;
    });

    $("#skillNav .ul").on('click', '.editbtn', function (e) {
        e.preventDefault();
        var dom = $(e.currentTarget).parents('li')[0];
        if (!dom) return;
        $(".SkillId").val(skillObj.skillId = dom.dataset.id);
        d = skillObj.skillGroup[skillObj.groupId].skills[skillObj.skillId];
        $(".SkillName").val(d.skillName);
        $(".SkillDescription").val(d.skillDescription);
        $("#editSkillModal").modal('show');
        return false;
    });

    $("#skillNav .ul").on('click', '.deletebtn', function (e) {
        e.preventDefault();
        var dom = $(e.currentTarget).parents('li')[0];
        if (!dom) return false;
        var id = dom.dataset.id;
        $.SmartMessageBox({
            title: 'Are you sure you want to delete it?',
            content: "This row will be removed",
            buttons: '[Remove][Cancel]'
        }, function (ButtonPressed) {
            if (ButtonPressed === "Remove") {
                $.ajax({
                    type: "post",
                    url: apiUrl + "Skill/DeleteSkill",
                    data: { skillId: id },
                    dataType: 'JSON',
                    success: function (data) {
                        if (data.status.code == 0) {
                            delete skillObj.skillGroup[skillObj.groupId].skills[id]
                            reloadSkillNav();
                            notice("Skill has been removed", "If you want to cancel, please contact the system administrator.");
                        }
                    }
                })
            }
        });
        return false;
    });

    $("#skillNav .ul").on('click', '.movebtn', function (e) {
        e.preventDefault();
        var dom = $(e.currentTarget).parents('li')[0];
        if (!dom) return false;
        var id = dom.dataset.id;
        $.SmartMessageBox({
            title: "Where the Skill move to?",
            content: "Skill Details will move with Skill",
            buttons: "[Move][Cancel]",
            input: "select",
            options: getSkillGroupSelect(),
        }, function (ButtonPress, Value) {
            var parentId = -1;
            for (var a in skillObj.skillGroup) {
                if (skillObj.skillGroup[a].skillParentName == Value) {
                    parentId = a;
                }
            }
            if (parentId < 1) return;
            if (ButtonPress !== "Move") return;
            $.ajax({
                type: "post",
                url: apiUrl + "Skill/MoveSkill",
                data: { skillId: id, skillParentId: parentId },
                dataType: 'JSON',
                success: function (data) {
                    if (data.status.code == 0) {
                        initData();
                        notice("Skill has been moved", "If you want to cancel, please move back it.");
                    }
                }
            })
        });
        e.preventDefault();
        return false;
    });

    $("#skillNav .ul").on('click', '.copybtn', function (e) {
        e.preventDefault();
        var dom = $(e.currentTarget).parents('li')[0];
        if (!dom) return false;
        var id = dom.dataset.id;


        $.SmartMessageBox({
            title: "Where the Skill copy to?",
            content: "You can choose whether to copy the Skill Details.",
            buttons: "[Copy][Copy with details][Cancel]",
            input: "select",
            options: getSkillGroupSelect(),
        }, function (ButtonPress, Value) {
            var parentId = -1;
            for (var a in skillObj.skillGroup) {
                if (skillObj.skillGroup[a].skillParentName == Value) {
                    parentId = a;
                }
            }
            if (parentId < 1) return;
            if (ButtonPress === "Cancel") return;
            $.ajax({
                type: "post",
                url: apiUrl + ((ButtonPress === "Copy") ? "Skill/AddSkill" : "Skill/CopySkillWithDetail"),
                data: {
                    skillParentId: parentId,
                    skillId: id,
                    skillName: skillObj.skillGroup[skillObj.groupId].skills[id].skillName,
                    skillDescription: skillObj.skillGroup[skillObj.groupId].skills[id].skillDescription,
                },
                dataType: 'JSON',
                success: function (data) {
                    if (data.status.code == 0) {
                        initData();
                        notice("Skill has been copyed", "If you want to cancel, please delete it.");
                    }
                }
            });
        });
        e.preventDefault();
        return false;
    });

    $("#skillNav .ul").on('click', 'li:not(.addNavBtn)', function (e) {
        var dom = e.currentTarget;
        skillObj.skillId = dom.dataset.id;
        $(".SkillId").val(skillObj.skillId);
        $("#showContent")[0].checked = true;
        loadTable();
    });

    function getSkillGroupSelect() {
        var values = "";
        for (var a in skillObj.skillGroup) {
            values += "[" + + "]";
        };
        return values;
    };

    function getSkillSelect() {
        var values = "";
        for (var a in skillObj.skillGroup) {
            for (var b in skillObj.skillGroup[a].skills) {
                values += "[" + skillObj.skillGroup[a].skillParentName + " - " + skillObj.skillGroup[a].skills[b].skillName + "]";
            }
        };
        return values;
    };

    $("#backToSkillParentNavBtn").click(showSkillParentNav);

    function showSkillParentNav() {
        if ($("#skillParentNav")[0].style.display == 'none') {
            $("#skillNav").css({ "z-index": 1, left: "0" }).animate({ left: "25%", opacity: 0 }, function () {
                $("#skillNav").css({ display: 'none', left: "0" });
            });
            $("#skillParentNav").css({ display: 'block', left: "-25%", opacity: 0, "z-index": 2 }).animate({ left: "0", opacity: 1 });
        }
    }

    function loadTable() {
        try {
            if (userinfo == null) throw 'err';
            var options = {
                ajax: function (request) {
                    console.log(request);
                    $.ajax({
                        type: "post",
                        url: apiUrl + "Skill/GetSkillDetails",
                        data: { skillId: skillObj.skillId },
                        dataType: 'json',
                        success: function (data, status, request) {
                            $table.bootstrapTable('load', data.result);
                            $table.bootstrapTable('hideLoading');
                        }
                    });
                },
                columns: [{
                    checkbox: true,
                    align: 'center'
                }, {
                    field: "skillChildId",
                    title: "ID",
                    visible: false
                }, {
                    field: "skillChildName",
                    title: "Name",
                    editable: true,
                }, {
                    field: "skillChildDescription",
                    title: "Description",
                    editable: true,
                }, {
                    field: "levelId",
                    title: "LevelGroup",
                    editable: true,
                    /*editable: {
                        type: 'select',
                        title: 'Level',
                        source: function () { var temp = []; for (var i = 1; i < userinfo.userLevels.length; i++)temp.push({ value: i, text: userinfo.userLevels[i] }); return temp; }
                    },*/
                }, {
                    field: "operations",
                    title: "Operations",
                    cardVisible: false,
                    sortable: false,
                    visible: true,
                    formatter: operationFormatter,
                }],
                height: $(window).height() - 100,
                showColumns: true,
                striped: true,
                showColumns: true,
                checkboxHeader: true,
                singleSelect: false,
                smartDisplay: false,
                showFullscreen: true,
                clickToSelect: false,
                showRefresh: true,
                showToggle: true,
                showMultiSort: false,
                classes: "table table-no-bordered",
                sortPriority: [{ "sortName": "userId", "sortOrder": "asc" }],
                toolbar: "#toolbar",
                onEditableSave: function (field, row, oldValue, $el) {
                    $.ajax({
                        type: "post",
                        url: apiUrl + "/Skill/EditSkillDetail",
                        data: row,
                        dataType: 'JSON',
                        success: function (data) {
                            if (data.status.code == 0) {
                                $(".editable-unsaved").removeClass("editable-unsaved");
                                notice("Success", "Data had been updated");
                            }
                        }
                    });
                }
            };
            if ($(window).width() < 400) {
                options.cardView = true;
                options.pageSize = 3;
                options.showToggle = false;
                options.showColumns = false;
            }
            $table.bootstrapTable('destroy').bootstrapTable(options)
            setTimeout(function () {
                $(".fixed-table-toolbar").addClass("panel-heading");
                $(".fixed-table-toolbar .columns").prepend(
                    '<button class="btn btn-default" title="Add"  data-toggle="modal" data-target="#addSkillDetailModal"><i class="glyphicon glyphicon-plus"></i></button>'
                    //+   '<button class="btn btn-default" title="Delete"><i class="glyphicon glyphicon-trash"></i></button>'
                    //+   '<button class="btn btn-default" title="Move"><i class="glyphicon glyphicon-scissors"></i></button>'
                    //+   '<button class="btn btn-default" title="Copy"><i class="glyphicon glyphicon-duplicate"></i></button>'
                );
                $(".bs-bars").addClass("no-margin");
            }, 100);
        }
        catch (e) {
            setTimeout(function () {
                loadTable();
            }, 1000);
            console.log(e);
        }
    }

    function operationFormatter(value, row, index) {
        return '<span class="label label-warning deletebtn" data-id="' + row.skillChildId + '"><i class="fa fa-trash-o" /> Delete</span> '
            + '<span class="label label-primary movebtn" data-id="' + row.skillChildId + '"><i class="fa fa-copy" /> Move</span> '
            + '<span class="label label-info copybtn" data-id="' + row.skillChildId + '"><i class="fa fa-cut" /> Copy</span>';
    }
</script>